<!-- ignore the following lines, they are not important to this demo -->
<jigsaw-demo-description [summary]="summary" [content]="description">
</jigsaw-demo-description>


<!-- start to learn the demo from here -->
<jigsaw-collapse id="test-collapse1" width="80%">
    <jigsaw-collapse-pane header="测试col" [isActive]="true">
        <jigsaw-input></jigsaw-input>
    </jigsaw-collapse-pane>

    <jigsaw-collapse-pane header="afdafd">
        姓名: <jigsaw-input placeholder="请输入姓名~"></jigsaw-input>
    </jigsaw-collapse-pane>

    <jigsaw-collapse-pane header="嵌套">
        <jigsaw-collapse mode="accordion">
            <jigsaw-collapse-pane header="测试col">
                <jigsaw-input placeholder="请输入姓名~"></jigsaw-input>
            </jigsaw-collapse-pane>

            <jigsaw-collapse-pane header="afdafd" isactive="true">
                姓名: <jigsaw-input placeholder="请输入姓名~"></jigsaw-input>
            </jigsaw-collapse-pane>
        </jigsaw-collapse>
    </jigsaw-collapse-pane>
</jigsaw-collapse>
<br>
<br>
<h4>accordion</h4>
<br>
<hr>
<br>
<jigsaw-collapse id="test-collapse2" mode="accordion">
    <jigsaw-collapse-pane [isActive]="true">
        <div jigsaw-title>
            <i class="fa fa-arrow-circle-right"></i>
            <span style="color: blue;">测试自定义head</span>
            <i class="fa fa-arrow-circle-left"></i>
        </div>
        <div jigsaw-body>
            <jigsaw-input placeholder="请输入姓名~"></jigsaw-input>
        </div>
    </jigsaw-collapse-pane>

    <jigsaw-collapse-pane header="afdafd">
        密码: <jigsaw-input placeholder="请输入姓名~"></jigsaw-input>
    </jigsaw-collapse-pane>
    <jigsaw-collapse-pane header="3">
        <p>今天是个好天气</p>
    </jigsaw-collapse-pane>
    <jigsaw-collapse-pane header="4">
        <p>今天是个好日子~</p>
    </jigsaw-collapse-pane>
</jigsaw-collapse>
<br>
<hr>
<br>
